<script setup lang='ts'>
import { getUserMessage } from '../../api/message';
import { useRoute } from 'vue-router';
import { onMounted ,ref} from 'vue';
import { mainUrl } from '@/api/utils';
const route = useRoute();
const medetail = ref({
  id: '',
  title: '',
  content: '',
  created_at: '',
  attachments: []
})
onMounted(async () => {
  let res = await getUserMessage(route.query.message_id);
  console.log(res);
  if (res.data.code == 200) {
    medetail.value = res.data.data;
  }
})
</script>

<template>
  <div class="info">
    <div class="header">
      <h1>{{ medetail.title }}</h1>
      <span>{{ medetail.created_at }}</span>
    </div>
    <el-divider />
    <div class="content" v-html="medetail.content"></div>
    <el-divider v-if="medetail.attachments.length > 0" />
    <div class="footer" v-if="medetail.attachments.length > 0">
      <span style="padding-left: 10px">相关附件</span>
      <div class="table_box">
        <el-table class="table_el" :data="medetail.attachments" style="width: auto">
          <el-table-column label="文件名" prop="title" show-overflow-tooltip />
          <el-table-column label="创建时间" prop="created_at" show-overflow-tooltip />
          <el-table-column width="200" label="操作">
            <template #default="scope">
              <el-button size="small" type="primary" >
                <a :href="`${mainUrl}/v1/attachment/get_attachment?aid=${scope.row.attachment_id}`"
                  download>下载</a>
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<style lang='scss' scoped>
.info{
  background-color: white;
  h1{
   
   
  padding-top: 30px;
  padding-left:20px
  }
  span{
    color: #9195A3;
    display: block;
    padding-left: 20px
   
  };
  .content{
    padding: 20px;
  }
}

</style>
